<template>
	<view class="cell-wrap" :style="{paddingBottom}">
		<view class="cell-inner">
			<slot></slot>
		</view>
	</view>
</template>

<script>
    export default {
        name: "Cell",
        props: {
            ratio: {
                type: Number,
                default: 1
            }
        },
        data() {
            return {
                paddingBottom: null
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.paddingBottom = this.ratio * 100 + '%'
            })
        }
    }
</script>
<style>
	.cell-wrap {
		height: 0;
		position: relative;
	}
	
	.cell-inner {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
</style>
